<template>
  <div>
    <div class="bear"></div>
    <div class="login">
      <p>用户名</p>
      <div>
        <el-input v-model="name" type="text">
          <i slot="prefix" class="el-input__icon el-icon-user"></i>
        </el-input>
      </div>
      <p>密码</p>
      <div>
        <el-input v-model="password" type="password" size="small">
          <i slot="prefix" class="el-input__icon el-icon-lock"></i>
        </el-input>
      </div>
      <div class="btns">
        <p>{{ msg }}</p>
        <button @click="login">登录</button>
        <button @click="register">注册</button>
      </div>
    </div>
    <div class="kwy" @mousemove="move">
      <h1 :style="mstyle">1</h1>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'register',
  data () {
    return {
      name: '',
      password: '',
      mstyle: '',
      timer: '',
      msg: ''
    }
  },
  methods: {
    async login () {
      const { status, data: { code, msg } } = await this.$axios.post('/users/login', {
        name: this.name,
        password: this.password
      })
      if (status === 200 && code === 1) {
        location.href = "/"
        return
      }
      this.msg = msg
    },
    register () {
      location.href = '/register'
    },
    move (event) {
      const self = this
      self.timer = setTimeout(() => {
        if (self.timer) {
          clearTimeout(self.timer)
        }
        this.mstyle = `display:inline-block;
                      transform:rotateZ(${(event.screenX / 25) + event.screenY / 15.5}deg);
                      font-size:100px;
                      `
      }, 10)
    }
  }
}
</script>

<style lang="stylus" scoped>
.bear
  background no-repeat url('/imgs/bear.jpg')
  width 500px
  height 280px
  position absolute
  margin 100px
  box-shadow 0px 10px 10px #95a5a6
  z-index -2
.login
  float right
  right 50px
  width 250px
  padding 40px 25px 20px 25px
  margin 100px auto
  border 1px solid #bdc3c7
  i
    font-size 19px
  .btns
    margin-top 20px
    p
      color red
    button
      display block
      width 100%
      margin 10px 0
      line-height 30px
      font-size 14px
      border-radius 5px
      background #3498db
      cursor pointer
      outline none
      &:last-child
        background #e74c3c
        &:hover
          background #c0392b
      &:hover
        background #2980b9
.kwy
  position fixed
  left 0px
  right 0
  top 0
  bottom 0px
  font-size 100px
  padding-top 800px
  padding-left 100px
  z-index -1
</style>
